{extend name="index/index" /}
{block name="main"}

<div class="content-page">
    <div class="content">
        <h1>{$title}</h1>
        <table width="800" border="1px solid #ccc">
            <tr>
                <th>id</th>
                <th>角色名</th>
                <th>权限</th>
                <th>操作</th>
            </tr>
            {volist name="data" key="k" id="v" }
            <tr id="role{$v['id']}">
                <td>{$v['id']}</td>
                <td>{$v['rolename']}</td>
                <td id="permission{$v['id']}">{:implode(' ',$v['permission'])}</td>
                <td>
                    <button class="assign" data-target="#myModal" data-toggle="modal" data_id="{$v['id']}">分配权限</button>
                    <button  class=" btn btn-danger btn-xs confirmDel" data-target="#confirm" data-toggle="modal" data_id="{$v['id']}">删除</button>

                </td>
            </tr>
            {/volist}
        </table>

    </div>
</div>

<!--删除的模态框-->
<div class="modal fade hidd bs-example-modal-sm" id="confirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">删除角色</h4>
            </div>
            <div class="checkbox" id="permission1" style="">
                    <p>您确定删除么?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary del" data_id=" "  data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>


<!--分配权限的模态框-->
<div class="modal fade hidd" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">分配权限</h4>
            </div>
            <div class="checkbox" id="permission" style="padding:20px">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary tijiao"  data-role="" onclick="demo()" data-dismiss="modal">提交</button>
            </div>
        </div>
    </div>
</div>

<script src="/static/temp/assets/libs/jquery-3.3.1.min.js"></script>

<script>

    $('.confirmDel').click(function () {
        var id=$(this).attr('data_id');
        console.log(id);
        $(".del").attr("data_id",id);
    });

    $('.del').click(function() {
        var rid = $(this).attr('data_id');
        $.ajax({
            method:'get',
            url: '/admin/role/del/' + rid,
            dataType: 'json',
            success:function (data) {

                $("#role"+data).remove();
            }
        });
    });

    $('.assign').click(function() {
        var rid = $(this).attr('data_id');
        assign(rid);

    });
    function assign(id) {
        $.ajax({
            method: 'get',
            url: '/admin/Role/assignPermissions/' + id,
            datatype: 'json',
            success: function (data) {
                // $('#roles').append(data +'<br>');
                var result = data.result;
                var all = data.all;
                var rid = data.rid;
                $("#permission").html('');
                if(all.length>0){
                    modalHtml(all,result,$("#permission"),rid)
                }
            },
            error: function () {
                alert('请求失败');

            }
        });
    }

    function modalHtml(all,result,permissions_box,rid){

        $(".tijiao").attr("data-role",rid);

        for(var i=0;i<all.length;i++){
            str = "";
            for(var j=0;j<result.length;j++){
                if(all[i].id==result[j].p_id){
                    str = "checked=checked";
                }
            }
            permissions_box.append("<input type='checkbox' name='permission' "+str+" value='"+all[i].id+"' /><span>"+all[i].permission+"</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
        }
    }


    function demo(){
        var rid = $(".tijiao").attr('data-role');
        console.log(rid);
        var arr = [];
        $("input[name='permission']:checked").each(function(i){
            arr[i] = $(this).val();
        });
        console.log(arr);
        str = JSON.stringify(arr).toString();
        console.log(str);
        $.ajax({
            method: 'post',
            url: '/admin/role/savepermission',
            datatype: 'json',
            data:{permission:str,id:rid},
            traditional:true,
            success:function(data){
                $("#permission"+rid).html(data);
            }
        });


    }




</script>






{/block}
